<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>微课堂 V1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  
  <body>
    <div class="x-body">
        <form class="layui-form">
          <div class="layui-form-item">
              <label for="L_email" class="layui-form-label">
                  <span class="x-red">*</span>课程名称
              </label>
              <div class="layui-input-inline">
              	 <input type="hidden" id="courseId" lay-verify="courseId">
                  <input type="text" id="courseName" name="courseName" required="" lay-verify="courseName"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>课程名称不建议超过15个字，太长会影响手机端的展示效果
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>讲师
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="teacher" name="teacher" required="" lay-verify="teacher"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>分类
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="type" name="type" required="" lay-verify="type"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>封面
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="cover" name="cover" required="" lay-verify="cover" lay-filter="cover"
                  autocomplete="off" class="layui-input" readonly>
              </div>
                  <button type="button" class="layui-btn" id="uploadPic">
					  <i class="layui-icon">&#xe67c;</i>上传图片
				 </button>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>视频
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="video" name="video" required="" lay-verify="video" lay-filter="video"
                  autocomplete="off" class="layui-input" readonly>
              </div>
               <button type="button" class="layui-btn" id="uploadVideo">
					  <i class="layui-icon">&#xe67c;</i>上传视频
				 </button>
          </div>
          <div class="layui-form-item">
              <label for="L_username" class="layui-form-label">
                  <span class="x-red">*</span>课程简介
              </label>
              <div class="layui-input-block">
			      <textarea id="courseContent" name="courseContent" required="" lay-verify="courseContent"
			       placeholder="请输入课程简介，建议200字以内" class="layui-textarea"></textarea>
			   </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="save" lay-submit="">
                  保存
              </button>
          </div>
      </form>
    </div>
 <script>
 layui.use(['form','layer','upload'], function(){
        $ = layui.jquery;
        var form = layui.form,
        layer = layui.layer;
        
        //自定义验证规则
        form.verify({
        	  courseName: function(value){
            if(value.length < 1){
              return '课程名不能为空';
            }
          },
          teacher: function(value){
            if(value.length < 1){
              return '讲师不能为空';
            }
          },
          type: function(value){
            if(value.length < 1){
              return '类型不能为空';
            }
          },
          cover: function(value){
        	  if(value.length < 1){
             return '封面不能为空';
           }
          },
          video: function(value){
            if(value.length < 1){
              return ' 视频不能为空';
            }
          },
          courseContent: function(value){
            if(value.length < 1){
              return '课程简介不能为空';
            }else if(value.length > 200){
            	  return '课程简介不能超过200个字符';
            }
          }
          
        });

        //监听提交
        form.on('submit(save)', function(data){
          console.log(data);
          //发异步，把数据提交给php
          $.ajax({
       	  	  url : 'wechat/course/update_',
       	  	  type : 'post',
       	  	  data : data.field,
       	  	  success : function(data){
		          layer.msg("保存成功", {icon: 6,time: 2000});
       	  	  }
        	  });
          return false;
        });
        
        var upload = layui.upload;
 	   
  	  //执行实例
  	  var uploadInst = upload.render({
  	    elem: '#uploadPic', //绑定元素
  	    url: '/wechat/course/uploadFile', //上传接口
  	    accept: 'images',
  	    done: function(res){
  	      //上传完毕回调
  	      if(res.code == 0){
	    	     $("#cover").val(res.data[0]);
	    	      form.render(null,'cover');
  	      }
  	      
  	    },
  	    error: function(){
  	      //请求异常回调
  	    }
  	  });
  	  var uploadInst_ = upload.render({
  	    elem: '#uploadVideo', //绑定元素
  	    url: '/wechat/course/uploadFile', //上传接口
  	    accept: 'video',
  	    done: function(res){
  	      //上传完毕回调
  	    	 if(res.code == 0){
	    	     $("#video").val(res.data[0]);
	    	      form.render(null,'video');
 	      }
  	    },
  	    error: function(){
  	      //请求异常回调
  	    }
  	  });
        
  	function getParam(paramName) { 
  	    paramValue = "", isFound = !1; 
  	    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) { 
  	        arrSource = unescape(this.location.search).substring(1, this.location.search.length).split("&"), i = 0; 
  	        while (i < arrSource.length && !isFound) arrSource[i].indexOf("=") > 0 && arrSource[i].split("=")[0].toLowerCase() == paramName.toLowerCase() && (paramValue = arrSource[i].split("=")[1], isFound = !0), i++ 
  	    } 
  	    return paramValue == "" && (paramValue = null), paramValue 
  	}  
  	//初始化表单
  	$.ajax({
  		url : '/wechat/course/findById',
  		data : {
  			courseId : 	getParam("courseId")
  		},
  		success : function(data){
  			data = JSON.parse(data);
  			console.log(data)
  			$("#courseId").val(data.courseId);
  			$("#courseName").val(data.courseName);
  			$("#type").val(data.typeName);
  			$("#teacher").val(data.teacher);
  			$("#cover").val(data.cover);
  			$("#video").val(data.video);
  			$("#courseContent").val(data.courseContent);
  		}
  	});
  	  
});
</script>
 <script>var _hmt = _hmt || []; (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();</script>
  </body>

</html>